<template>
  <div class="wrapper">
    <!-- 头部 -->
    <header>
      <div class="header-content">
        <div class="header-content-left" @click="toggleCitySelector">
          <div class="city-name">{{selectedCity}}</div>
          <i class="fa fa-angle-down"></i>
        </div>
        <div class="header-content-center">
          <span class="mall-title">商城</span>
        </div>
        <div class="header-content-right">
          <div class="mini-search">
            <i class="fa fa-search"></i>
            <input type="text" placeholder="搜索" ref="searchInput">
          </div>
        </div>
      </div>
    </header>

    <!-- 城市选择器 - 完全重构 -->
    <div class="city-selector-container" v-if="showCitySelector">
      <div class="city-selector">
        <div class="city-selector-header">
          <span>选择城市</span>
          <i class="fa fa-close" @click="closeCitySelector"></i>
        </div>
        
        <!-- 热门城市 -->
        <div class="city-section">
          <h3>热门城市</h3>
          <div class="city-grid">
            <div 
              v-for="(city, index) in hotCities" 
              :key="'hot-'+index" 
              class="city-item"
              @click="selectCity(city)"
            >
              {{city}}
            </div>
          </div>
        </div>
        
        <!-- 按省份选择 -->
        <div class="city-section">
          <h3>按省份选择</h3>
          <div 
            v-for="(province, index) in provinces" 
            :key="'province-'+index"
            class="province-item"
          >
            <div class="province-name">{{province.name}}</div>
            <div class="city-list">
              <div 
                v-for="(city, cityIndex) in province.cities" 
                :key="'city-'+index+'-'+cityIndex"
                class="city-name"
                @click="selectCity(city)"
              >
                {{city}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分类导航 -->
    <div class="category-nav">
      <div class="category-item active">
        <span>体检</span>
      </div>
      <div class="category-item">
        <span>AI健康</span>
      </div>
      <div class="category-item">
        <span>疫苗</span>
      </div>
      <div class="category-item">
        <span>牙科</span>
      </div>
      <div class="category-item">
        <span>基因</span>
      </div>
      <div class="category-item">
        <span>全球甄选</span>
      </div>
    </div>

    <!-- 图标分类 -->
    <div class="icon-categories">
      <div class="icon-category">
        <div class="icon-wrap"><i class="fa fa-id-card-o"></i></div>
        <p>入职体检</p>
      </div>
      <div class="icon-category">
        <div class="icon-wrap"><i class="fa fa-user"></i></div>
        <p>中青年优选</p>
      </div>
      <div class="icon-category">
        <div class="icon-wrap"><i class="fa fa-user-plus"></i></div>
        <p>中老年臻爱</p>
      </div>
      <div class="icon-category">
        <div class="icon-wrap"><i class="fa fa-female"></i></div>
        <p>女性甄选</p>
      </div>
      <div class="icon-category">
        <div class="icon-wrap"><i class="fa fa-male"></i></div>
        <p>男士套餐</p>
      </div>
    </div>

    <div class="icon-categories second-row">
      <div class="icon-category">
        <div class="icon-wrap"><i class="fa fa-stethoscope"></i></div>
        <p>专项检测</p>
      </div>
      <div class="icon-category">
        <div class="icon-wrap"><i class="fa fa-heart"></i></div>
        <p>婚检孕检</p>
      </div>
      <div class="icon-category">
        <div class="icon-wrap"><i class="fa fa-medkit"></i></div>
        <p>防癌筛查</p>
      </div>
      <div class="icon-category">
        <div class="icon-wrap"><i class="fa fa-hospital-o"></i></div>
        <p>磁共振/CT</p>
      </div>
      <div class="icon-category">
        <div class="icon-wrap"><i class="fa fa-star"></i></div>
        <p>尊享高端</p>
      </div>
    </div>

    <!-- 筛选排序栏 -->
    <div class="filter-bar">
      <div class="filter-item" @click="showSort = !showSort">
        <span>默认排序</span>
        <i class="fa fa-angle-down"></i>
      </div>
      <div class="filter-item" @click="showFilter = !showFilter">
        <span>筛选</span>
        <i class="fa fa-filter"></i>
      </div>
    </div>

    <!-- 排序弹出层 -->
    <div class="sort-panel" v-if="showSort">
      <div class="sort-option" @click="selectSort('default')">
        <span>默认排序</span>
        <i class="fa fa-check" v-if="sortType === 'default'"></i>
      </div>
      <div class="sort-option" @click="selectSort('priceLow')">
        <span>价格(从低到高)</span>
        <i class="fa fa-check" v-if="sortType === 'priceLow'"></i>
      </div>
      <div class="sort-option" @click="selectSort('priceHigh')">
        <span>价格(从高到低)</span>
        <i class="fa fa-check" v-if="sortType === 'priceHigh'"></i>
      </div>
      <div class="sort-option" @click="selectSort('salesLow')">
        <span>销量(从低到高)</span>
        <i class="fa fa-check" v-if="sortType === 'salesLow'"></i>
      </div>
      <div class="sort-option" @click="selectSort('salesHigh')">
        <span>销量(从高到低)</span>
        <i class="fa fa-check" v-if="sortType === 'salesHigh'"></i>
      </div>
    </div>

    <!-- 筛选弹出层 -->
    <div class="filter-panel" v-if="showFilter">
      <h3>适用人群</h3>
      <div class="filter-tags">
        <div class="filter-tag" :class="{active: ageFilter === 'all'}" @click="ageFilter = 'all'">不限</div>
        <div class="filter-tag" :class="{active: ageFilter === 'middle'}" @click="ageFilter = 'middle'">中青年</div>
        <div class="filter-tag" :class="{active: ageFilter === 'elder'}" @click="ageFilter = 'elder'">中老年</div>
        <div class="filter-tag" :class="{active: ageFilter === 'child'}" @click="ageFilter = 'child'">儿童</div>
        <div class="filter-tag" :class="{active: ageFilter === 'pregnant'}" @click="ageFilter = 'pregnant'">孕妇</div>
      </div>

      <h3>适用性别</h3>
      <div class="filter-tags">
        <div class="filter-tag" :class="{active: genderFilter === 'all'}" @click="genderFilter = 'all'">不限</div>
        <div class="filter-tag" :class="{active: genderFilter === 'male'}" @click="genderFilter = 'male'">男性</div>
        <div class="filter-tag" :class="{active: genderFilter === 'female'}" @click="genderFilter = 'female'">女性</div>
      </div>

      <h3>包含检项</h3>
      <div class="filter-tags">
        <div class="filter-tag" :class="{active: checkItems.includes('spirochete')}" @click="toggleCheckItem('spirochete')">幽门螺杆菌检测</div>
        <div class="filter-tag" :class="{active: checkItems.includes('ct')}" @click="toggleCheckItem('ct')">胸肺部CT</div>
        <div class="filter-tag" :class="{active: checkItems.includes('heart')}" @click="toggleCheckItem('heart')">心脏彩超</div>
        <div class="filter-tag" :class="{active: checkItems.includes('thyroid')}" @click="toggleCheckItem('thyroid')">甲状腺彩超</div>
        <div class="filter-tag" :class="{active: checkItems.includes('hpv')}" @click="toggleCheckItem('hpv')">TCT+HPV筛查</div>
        <div class="filter-tag" :class="{active: checkItems.includes('breast')}" @click="toggleCheckItem('breast')">乳腺彩超</div>
        <div class="filter-tag" :class="{active: checkItems.includes('prostate')}" @click="toggleCheckItem('prostate')">前列腺彩超</div>
        <div class="filter-tag" :class="{active: checkItems.includes('tumor')}" @click="toggleCheckItem('tumor')">TM肿瘤12项</div>
      </div>

      <div class="filter-buttons">
        <div class="reset-btn" @click="resetFilter">重置</div>
        <div class="confirm-btn" @click="confirmFilter">确定</div>
      </div>
    </div>

    <!-- 产品列表 -->
    <div class="product-list">
      <div class="product-card" v-for="(product, index) in filteredProducts" :key="index">
        <div class="product-image">
          <img :src="product.image" alt="体检套餐">
          <div class="product-tag" v-if="product.tag">{{product.tag}}</div>
        </div>
        <div class="product-info">
          <div class="product-title">
            <div class="subsidy-tag" v-if="product.subsidy">百亿补贴</div>
            <h3>【限时特价】{{product.title}}</h3>
          </div>
          <div class="product-features">
            <span v-for="(feature, idx) in product.features" :key="idx">{{feature}}</span>
          </div>
          <div class="hospital-container">
            <div class="product-hospital">{{product.hospital}}</div>
          </div>
          <div class="product-bottom">
            <div class="price-container">
              <div class="price">¥{{product.price}}</div>
              <div class="original-price" v-if="product.subsidy && product.originalPrice">¥{{product.originalPrice}}</div>
            </div>
            <div class="sales">{{product.sales}}<span>已预约</span></div>
            <div class="add-btn">
              <i class="fa fa-plus-circle"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <Footer></Footer>

    <!-- 遮罩层只保留一个 -->
    <div class="overlay" v-if="showSort || showFilter" @click="closeAllPanels"></div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import Footer from '@/components/Footer.vue';

export default {
  components: {
    Footer
  },
  setup() {
    const showSort = ref(false);
    const showFilter = ref(false);
    const showCitySelector = ref(false);
    const selectedCity = ref('广州');
    const sortType = ref('default');
    const ageFilter = ref('all');
    const genderFilter = ref('all');
    const checkItems = ref([]);
    const searchInput = ref(null);
    
    // 热门城市
    const hotCities = ref([
      '北京', '上海', '广州', '深圳', '杭州', 
      '南京', '成都', '重庆', '武汉', '西安'
    ]);
    
    // 省份和城市数据
    const provinces = ref([
      {
        name: '广东省',
        cities: ['广州', '深圳', '珠海', '佛山', '东莞', '中山', '惠州']
      },
      {
        name: '浙江省',
        cities: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴']
      },
      {
        name: '江苏省',
        cities: ['南京', '无锡', '徐州', '常州', '苏州', '南通']
      },
      {
        name: '湖北省',
        cities: ['武汉', '黄石', '十堰', '荆州', '宜昌', '襄阳', '鄂州']
      },
      {
        name: '四川省',
        cities: ['成都', '自贡', '攀枝花', '泸州', '德阳', '绵阳', '广元']
      },
      {
        name: '河南省',
        cities: ['郑州', '开封', '洛阳', '平顶山', '安阳', '鹤壁', '新乡']
      }
    ]);
    
    // 选择城市
    const selectCity = (city) => {
      selectedCity.value = city;
      showCitySelector.value = false;
      console.log('选择城市:', city);
    };

    // 切换城市选择器可见性
    const toggleCitySelector = () => {
      showCitySelector.value = !showCitySelector.value;
      console.log('showCitySelector:', showCitySelector.value);
    };
    
    // 关闭城市选择器
    const closeCitySelector = () => {
      showCitySelector.value = false;
    };
    
    // 聚焦搜索框
    const focusSearch = () => {
      if (searchInput.value) {
        searchInput.value.focus();
      }
    };
    
    const products = ref([
      {
        image: '/src/assets/img/meal1.jpg',
        tag: '升级',
        subsidy: true,
        title: '臻爱优选健康体检套餐（女）',
        features: ['中青年', '女性', '幽门螺杆菌', '肿瘤筛查', '宫颈癌深度筛查', '甲状腺深度筛查', '妇科检查'],
        hospital: '爱康未来互联网医院',
        price: '399.00',
        originalPrice: '598.00',
        sales: '5851',
        gender: 'female',
        age: 'middle',
        checkItems: ['spirochete', 'tumor', 'thyroid']
      },
      {
        image: '/src/assets/img/meal2.jpg',
        tag: '升级',
        subsidy: true,
        title: '臻爱优选健康体检套餐（男）',
        features: ['中青年', '男性', '幽门螺杆菌', '前列腺彩超', '肿瘤筛查', '甲状腺深度筛查'],
        hospital: '爱康未来互联网医院',
        price: '399.00',
        originalPrice: '598.00',
        sales: '6598',
        gender: 'male',
        age: 'middle',
        checkItems: ['spirochete', 'prostate', 'thyroid']
      },
      {
        image: '/src/assets/img/meal3.jpg',
        title: '中青年限定轻奢套餐（女）',
        features: ['都市精英', '中青年', '女性', '血脂', '血清蛋白四'],
        hospital: '爱康未来互联网医院',
        price: '299.00',
        sales: '3245',
        gender: 'female',
        age: 'middle',
        checkItems: []
      },
      {
        image: '/src/assets/img/meal4.jpg',
        title: '中青年限定轻奢套餐（男）',
        features: ['都市精英', '中青年', '男性', '血脂', '血清蛋白四'],
        hospital: '爱康未来互联网医院',
        price: '299.00',
        sales: '3612',
        gender: 'male',
        age: 'middle',
        checkItems: []
      }
    ]);
    
    // 根据筛选和排序条件过滤产品
    const filteredProducts = computed(() => {
      let result = [...products.value];
      
      // 应用年龄筛选
      if (ageFilter.value !== 'all') {
        result = result.filter(p => p.age === ageFilter.value);
      }
      
      // 应用性别筛选
      if (genderFilter.value !== 'all') {
        result = result.filter(p => p.gender === genderFilter.value);
      }
      
      // 应用检查项目筛选
      if (checkItems.value.length > 0) {
        result = result.filter(p => 
          checkItems.value.some(item => p.checkItems && p.checkItems.includes(item))
        );
      }
      
      // 应用排序
      switch(sortType.value) {
        case 'priceLow':
          result.sort((a, b) => parseFloat(a.price) - parseFloat(b.price));
          break;
        case 'priceHigh':
          result.sort((a, b) => parseFloat(b.price) - parseFloat(a.price));
          break;
        case 'salesLow':
          result.sort((a, b) => parseInt(a.sales) - parseInt(b.sales));
          break;
        case 'salesHigh':
          result.sort((a, b) => parseInt(b.sales) - parseInt(a.sales));
          break;
        default:
          // 默认排序，可以自定义
          break;
      }
      
      return result;
    });
    
    // 排序方法
    const selectSort = (type) => {
      sortType.value = type;
      showSort.value = false;
    };
    
    // 检查项目切换
    const toggleCheckItem = (item) => {
      const index = checkItems.value.indexOf(item);
      if (index === -1) {
        checkItems.value.push(item);
      } else {
        checkItems.value.splice(index, 1);
      }
    };
    
    // 重置筛选
    const resetFilter = () => {
      ageFilter.value = 'all';
      genderFilter.value = 'all';
      checkItems.value = [];
    };
    
    // 确认筛选
    const confirmFilter = () => {
      showFilter.value = false;
    };
    
    // 关闭所有面板
    const closeAllPanels = () => {
      showSort.value = false;
      showFilter.value = false;
      // 城市选择器通过自己的方法关闭
    };
    
    onMounted(() => {
      console.log('当前选择的城市:', selectedCity.value);
    });

    return {
      showSort,
      showFilter,
      showCitySelector,
      selectedCity,
      hotCities,
      provinces,
      selectCity,
      sortType,
      ageFilter,
      genderFilter,
      checkItems,
      products,
      filteredProducts,
      selectSort,
      toggleCheckItem,
      resetFilter,
      confirmFilter,
      closeAllPanels,
      toggleCitySelector,
      closeCitySelector,
      focusSearch,
      searchInput
    };
  }
};
</script>

<style scoped>
.wrapper {
  width: 100%;
  background-color: #F9F9F9;
  padding-bottom: 15vw;
}

/* 头部 */
header {
  width: 100%;
  background-color: #FFF;
  padding-top: 5vw;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-content {
  width: 100%;
  height: 12vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4vw;
}

.header-content-left {
  display: flex;
  align-items: center;
  width: 20%;
  justify-content: flex-start;
  cursor: pointer;
}

.city-name {
  font-size: 4vw;
  font-weight: 500;
  white-space: nowrap;
  overflow: visible; /* 修改为可见 */
  margin-right: 1vw;
  color: #333;
}

.header-content-left i {
  margin-left: 0;
  font-size: 3.5vw;
  cursor: pointer;
  color: #999;
}

.header-content-center {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mall-title {
  font-size: 5vw;
  font-weight: 600;
  color: #FF6B01;
  font-family: 'Arial Rounded MT Bold', 'Microsoft YaHei', sans-serif;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5vw;
}

.header-content-right {
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

/* 右侧迷你搜索框 */
.mini-search {
  display: flex;
  align-items: center;
  background-color: #F5F5F5;
  border-radius: 4vw;
  padding: 0 3vw;
  height: 8vw;
  width: 100%;
}

.mini-search i {
  font-size: 3.5vw;
  color: #999;
  margin-right: 2vw;
}

.mini-search input {
  border: none;
  background: transparent;
  font-size: 3.5vw;
  width: 100%;
  outline: none;
  color: #333;
}

/* 移除旧的搜索栏样式 */
.search-bar {
  display: none;
}

.vertical-text {
  font-size: 4.5vw;
  font-weight: 500;
  line-height: 5vw;
  text-align: center;
}

/* 城市选择器 - 完全重构 */
.city-selector-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1001; /* 确保在最上层 */
}

.city-selector {
  width: 90%;
  max-width: 500px;
  background-color: #FFF;
  border-radius: 4vw;
  margin-top: 20vw;
  box-shadow: 0 4vw 20vw rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  max-height: 80vh; /* 限制最大高度 */
  overflow-y: auto;
}

.city-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3vw 4vw;
  border-bottom: 1px solid #EAEAEA;
  background-color: #F8F8F8;
  position: sticky;
  top: 0;
  z-index: 10;
}

.city-selector-header span {
  font-size: 4.5vw;
  font-weight: bold;
  color: #333;
}

.city-selector-header i {
  font-size: 5vw;
  color: #999;
  cursor: pointer;
  padding: 2vw;
}

.city-section {
  padding: 3vw 4vw;
}

.city-section h3 {
  font-size: 3.8vw;
  color: #666;
  margin-bottom: 3vw;
  font-weight: normal;
}

.city-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
}

.city-item {
  width: calc(33.33% - 2vw);
  height: 10vw;
  background-color: #F5F5F5;
  border-radius: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5vw;
  color: #333;
  cursor: pointer;
}

.city-item:active {
  background-color: #FFE4CC;
  color: #FF6B01;
}

.province-item {
  margin-bottom: 4vw;
}

.province-name {
  font-size: 4vw;
  color: #333;
  margin-bottom: 2vw;
  font-weight: 500;
}

.city-list {
  display: flex;
  flex-wrap: wrap;
}

.city-name {
  font-size: 3.5vw;
  color: #666;
  padding: 1.5vw 3vw 1.5vw 0;
  cursor: pointer;
}

.city-name:active {
  color: #FF6B01;
}

/* 省市选择区域样式 */
.province-item .city-list .city-name {
  font-size: 3.5vw;
  color: #666;
  margin-right: 4vw;
  margin-bottom: 2vw;
  padding: 1vw 0;
  cursor: pointer; /* 添加指针样式 */
  text-align: center; /* 确保文字居中 */
}

.province-item .city-list .city-name:hover {
  color: #FF6B01;
}

/* 分类导航 */
.category-nav {
  width: 100%;
  height: 12vw;
  background-color: #FFF;
  display: flex;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 2vw;
  -webkit-overflow-scrolling: touch;
}

.category-nav::-webkit-scrollbar {
  display: none;
}

.category-item {
  height: 100%;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-item span {
  font-size: 3.8vw;
  color: #333;
  position: relative;
}

.category-item.active span {
  color: #FF6B01;
  font-weight: bold;
}

.category-item.active span::after {
  content: "";
  position: absolute;
  bottom: -1.5vw;
  left: 0;
  width: 100%;
  height: 0.5vw;
  background-color: #FF6B01;
  border-radius: 0.5vw;
}

/* 图标分类 */
.icon-categories {
  width: 100%;
  background-color: #FFF;
  display: flex;
  padding: 4vw 2vw;
}

.second-row {
  margin-top: 0.5vw;
}

.icon-category {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-wrap {
  width: 12vw;
  height: 12vw;
  background-color: #F8F0E5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrap i {
  font-size: 6vw;
  color: #FF6B01;
}

.icon-category p {
  font-size: 3vw;
  margin-top: 2vw;
  color: #333;
}

/* 筛选排序栏 */
.filter-bar {
  width: 100%;
  height: 12vw;
  background-color: #FFF;
  display: flex;
  border-bottom: 1px solid #EAEAEA;
  margin-top: 2vw;
}

.filter-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5vw;
  color: #333;
}

.filter-item i {
  margin-left: 1vw;
  font-size: 3.5vw;
}

/* 排序面板 */
.sort-panel {
  width: 100%;
  background-color: #FFF;
  position: fixed;
  top: 30vw;
  left: 0;
  z-index: 101;
}

.sort-option {
  height: 12vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  border-bottom: 1px solid #F2F2F2;
  font-size: 3.5vw;
}

.sort-option i {
  color: #FF6B01;
}

/* 筛选面板 */
.filter-panel {
  width: 100%;
  background-color: #FFF;
  position: fixed;
  top: 30vw;
  left: 0;
  z-index: 101;
  padding: 4vw;
  height: 70vh;
  overflow-y: auto;
}

.filter-panel h3 {
  font-size: 3.8vw;
  font-weight: normal;
  margin-bottom: 3vw;
  color: #333;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 6vw;
}

.filter-tag {
  padding: 2vw 4vw;
  background-color: #F5F5F5;
  border-radius: 1vw;
  margin-right: 3vw;
  margin-bottom: 3vw;
  font-size: 3.2vw;
  color: #333;
}

.filter-tag.active {
  background-color: #FFF0E6;
  color: #FF6B01;
  border: 1px solid #FF6B01;
}

.filter-buttons {
  display: flex;
  position: sticky;
  bottom: 0;
  background-color: #FFF;
  padding: 3vw 0;
}

.reset-btn, .confirm-btn {
  flex: 1;
  height: 12vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2vw;
  font-size: 4vw;
}

.reset-btn {
  background-color: #F5F5F5;
  color: #333;
  margin-right: 2vw;
}

.confirm-btn {
  background-color: #FF6B01;
  color: #FFF;
  margin-left: 2vw;
}

/* 产品列表 */
.product-list {
  width: 100%;
  padding: 2vw;
}

.product-card {
  width: 100%;
  background-color: #FFF;
  border-radius: 2vw;
  margin-bottom: 3vw;
  overflow: hidden;
  display: flex;
}

.product-image {
  width: 30%;
  position: relative;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-tag {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FF5722;
  color: #FFF;
  padding: 1vw 2vw;
  font-size: 3vw;
  border-bottom-right-radius: 2vw;
}

.product-info {
  width: 70%;
  padding: 3vw;
}

.product-title {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2vw;
}

.subsidy-tag {
  display: inline-block;
  background-color: #FF4D4F;
  color: white;
  font-size: 2.8vw;
  padding: 0.5vw 1.5vw;
  border-radius: 0.8vw;
  margin-right: 2vw;
  margin-top: 0.5vw;
}

.product-info h3 {
  font-size: 3.8vw;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.product-features {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2vw;
}

.product-features span {
  font-size: 3vw;
  color: #999;
  margin-right: 2vw;
  margin-bottom: 1vw;
}

.product-features span:not(:last-child)::after {
  content: "|";
  margin-left: 2vw;
  color: #DEDEDE;
}

.hospital-container {
  margin-bottom: 2vw;
}

.product-hospital {
  display: inline-block;
  font-size: 3vw;
  color: #999;
  background-color: #F8F8F8;
  padding: 1vw 2.5vw;
  border-radius: 4vw;
}

.product-bottom {
  display: flex;
  align-items: center;
}

.price-container {
  display: flex;
  align-items: baseline;
  flex: 1.5;
}

.price {
  color: #FF6B01;
  font-size: 4.5vw;
  font-weight: bold;
  margin-right: 2vw;
}

.original-price {
  color: #999;
  font-size: 3vw;
  text-decoration: line-through;
}

.sales {
  font-size: 2.8vw;
  color: #999;
  flex: 1.5;
  text-align: right;
  padding-right: 3vw;
}

.sales span {
  margin-left: 0.5vw;
}

.add-btn {
  flex: 0.5;
  text-align: right;
}

.add-btn i {
  font-size: 6vw;
  color: #FF6B01;
}

/* 遮罩层 */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000; /* 确保在城市选择器之下 */
}

/* 适配底部导航 */
footer {
  z-index: 99;
}

/* 测试用样式，确保城市名称可见 */
.city-name {
  color: #000;
  display: block;
}
</style> 